<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>果壳网 科技有意思</title>
  <!-- 题解:  修改link标签使用相对路径引入css文件 -->
  <!-- <link href="css/style.css" rel="stylesheet" type="text/css"> -->
  <link href="./css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!--头部-->
  <header>
    <div class="header">
      <div class="logo"><a href="#"><img src="images/logo.jpg" width="117" height="34" alt="果壳网"></a></div>
      <ul>
        <li><a href="#">科学人</a></li>
        <li><a href="#">小组</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">MOOC</a></li>
        <li><a href="#">在行</a></li>
        <li><a href="#">科学与生活</a></li>
        <li><a href="#">其他<b></b></a></li>
      </ul>
      <div class="form">
        <form action="" method="get">
          <input class="search" name="" type="text">
          <input class="button" name="" type="button">
        </form>
      </div>
    </div>
  </header>
  <div class="banner">
    <div class="login">
      <div class="login-in">
        <p>现在加入果壳，一起记录科技新时代</p>
        <a href="#">立即注册</a>
        <a href="#">用户登录</a>
      </div>
    </div>
  </div>
  <!--头部结束-->
  <!--主体部分-->
  <div class="content">
    <div class="main">
      <div class="title news">
        <h1>最新推荐</h1>
        <a href="#">改善肠道菌群？也许可以试试橄榄油！</a>
      </div>
      <div class="newscon">
        <img src="images/pic1.jpg">
        <ul>
          <li><a href="#">每次看到甩鞭子锻炼的大爷我都在想……</a></li>
          <li><a href="#">你知道甘草片的原料开花是啥样吗？</a></li>
          <li><a href="#">某一天，人会想起，被机器人支配的恐惧</a></li>
          <li><a href="#">死刑犯的最后一餐竟然是因果律武器！</a></li>
          <li><a href="#">装下宇宙的锅到底有多大？</a></li>
          <li><a href="#">波峰和波谷抵消后，能量去哪了？</a></li>
          <li><a href="#">野生的熊会蛀牙吗？</a></li>
          <li><a href="#">黄瓜可以接受苦瓜的花粉而受精吗？</a></li>
        </ul>
      </div>
      <div class="title ask">
        <h1>热门问答</h1>
      </div>
      <div class="maincon">
        <div class="mainconbox">
          <div class="boxtop">
            <h1>科学·技术</h1>
            <img src="images/pic2.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>人文·社科</h1>
            <img src="images/pic3.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>生活·娱乐</h1>
            <img src="images/pic4.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>自然·生态</h1>
            <img src="images/pic5.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
      </div>
      <div class="title hot">
        <h1>小组热帖</h1>
      </div>
      <div class="maincon">
        <div class="mainconbox">
          <div class="boxtop">
            <h1>科技</h1>
            <img src="images/pic6.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>人文</h1>
            <img src="images/pic7.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>生活</h1>
            <img src="images/pic8.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
        <div class="mainconbox">
          <div class="boxtop">
            <h1>娱乐</h1>
            <img src="images/pic9.jpg">
            <h2><a href="#">故宫排水系统真的很强吗？</a></h2>
            <p>最重要的因素其实不是什么良心下水道，而是：,...<a href="#">详细</a></p>
          </div>
          <ul>
            <li><a href="#">这个“消防灭火球”是什么东西？</a></li>
            <li><a href="#">13亿分贝是个什么概念？ 能量有多强？</a></li>
            <li><a href="#">“老年痴呆疫苗”问世了？靠谱吗？</a></li>
            <li><a href="#">请问钢化玻璃这样摆放会自爆吗？</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="side">
      <div class="rmxztitle">
        <h1>热门小组</h1>
        <a href="#">换一换</a>
      </div>
      <div class="rmxzcon">
        <div class="rmz">
          <img src="images/tou1.jpg">
          <h3><a href="#">美丽也是技术活</a><span>1026022人加入</span></h3>
          <p>护肤、美容、纤体、整形…… 如今我们有</p>
        </div>
        <div class="rmz">
          <img src="images/tou2.jpg">
          <h3><a class="special" href="#">【水组】-水煮果壳</a><a class="specialicon" href="#"></a><span>755616人加入</span></h3>
          <p>1、这是一个专门灌水、吐槽、版聊、无聊</p>
        </div>
        <div class="rmz">
          <img src="images/tou3.jpg">
          <h3><a href="#">创业者园地</a><span>154400人加入</span></h3>
          <p>创业是年轻的动力，不想打工一辈</p>
        </div>
      </div>
      <div class="hotnews">
        <h1>社区热点</h1>
        <ul>
          <li><b></b><a href="#">【举报】请管理注意删除垃圾帖和问答</a></li>
          <li><b></b><a href="#">【好消息】热心网友慷慨捐献，高龄长者成功续命！</a></li>
          <li><b></b><a href="#">赵薇事件和美国一部电影的关系</a></li>
          <li><b></b><a href="#">说起烧烤，大部分人会首先想到烤肉，其实烤蔬菜甚</a></li>
          <li><b></b><a href="#">[用户协议] 注册账号的时候你们会看吗？</a></li>
          <li><b></b><a href="#">门口的牛肉没了，碗里的牛肉呢？？</a></li>
          <li><b></b><a href="#">我终于知道为什么有人给绿教洗地了，就在刚才！</a></li>
          <li><b></b><a href="#">【餐桌物种日历】7月26日 光草甘果</a></li>
        </ul>
      </div>
      <div class="rmxztitle">
        <h1>果壳专区</h1>
        <a href="#">更多专区</a>
      </div>
      <ul class="more">
        <li><b></b><a href="#">二十万软妹币，全城通缉极客</a></li>
        <li><b></b><a href="#">2016 艳 遇 科学摄影</a></li>
        <li><b></b><a href="#">腕上黑客养成计划</a></li>
        <li><b></b><a href="#">时间旅行不可能？</a></li>
        <li><b></b><a href="#">做人这件事，你知道多少！</a></li>
        <li><b></b><a href="#">抗谣性测试 之 饮料篇</a></li>
        <li><b></b><a href="#">测试你的充·电力</a></li>
        <li><b></b><a href="#">核里的宇宙</a></li>
        <li><b></b><a href="#">口香糖探秘之旅</a></li>
        <li><b></b><a href="#">科学创业</a></li>
        <li><b></b><a href="#">万有青年养成计划</a></li>
        <li><b></b><a href="#">涂化的世界</a></li>
        <li><b></b><a href="#"> 万有市集：果壳官方主题商店，好玩的都在这里啦</a></li>
      </ul>
      <div class="guanzhu">
        <a class="wxgz" href="#">关注公众微信</a>
        <a class="wbgz" href="#">关注微博</a>
      </div>
      <div class="adv">
        <a class="ios" href="#"></a>
        <a class="android" href="#"></a>
      </div>
    </div>
  </div>
  <!--主体结束-->
  <!--底部-->
  <footer>
    <ul>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">加入果壳</a></li>
      <li><a href="#">媒体报道</a></li>
      <li><a href="#">帮助中心</a></li>
      <li><a href="#">果壳活动</a></li>
      <li><a href="#">免责声明</a></li>
      <li><a href="#">联系我们</a></li>
      <li><a href="#">移动版</a></li>
      <li><a href="#">移动应用</a></li>
    </ul>
    <p>©2021果壳网 京ICP备09043258号-2 <b></b>京公网安备11010502007133号</p>
  </footer>
  <!--底部结束-->

</body>

</html>